<template>
  <div class="page-footer">
    <div class="cont">
      <div class="top">
        <link-list />
        <link-list />
        <link-list />
        <link-list />
        <div class="flex"></div>
        <div class="contact-box">
          <div class="qrcode">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1.hdfimg.com%2Fg8%2FM07%2FF3%2F55%2FtoYBAGBN-8GAFhCxAAAD9f6VmJ4867.png%3F_ms_%3D0f94&refer=http%3A%2F%2Fn1.hdfimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620009107&t=d22b77d21743272e8867a2d0927319c8"
              alt=""
            />
            <div class="tips">微信公众号</div>
          </div>
          <div class="tel-1"><icon name="iphone" size="14" />400-432-2345</div>
        </div>
        <div class="contact-box" style="margin-left: 80px">
          <div class="qrcode">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1.hdfimg.com%2Fg8%2FM07%2FF3%2F55%2FtoYBAGBN-8GAFhCxAAAD9f6VmJ4867.png%3F_ms_%3D0f94&refer=http%3A%2F%2Fn1.hdfimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620009107&t=d22b77d21743272e8867a2d0927319c8"
              alt=""
            />
            <div class="tips">微信公众号</div>
          </div>
          <div class="tel-2"><icon name="iconkefu" size="16" />咨询客服</div>
        </div>
      </div>
      <div class="line"></div>
      <copyright />
    </div>
  </div>
</template>

<script>
import LinkList from "./LinkList";
import Copyright from "./Copyright";
export default {
  components: {
    LinkList,
    Copyright,
  },
};
</script>

<style lang="scss" scoped>
.page-footer {
  background: #000000;
  .cont {
    max-width: 1200px;
    color: #fff;
    margin: 0 auto;
    .top {
      padding: 20px 0;
      display: flex;
      .flex {
        flex: 1;
      }
      .contact-box {
        width: 120px;
        .qrcode {
          padding: 10px;
          background: #fff;
          img {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
          }
          .tips {
            background: #000000;
            font-size: 12px;
            line-height: 26px;
            text-align: center;
          }
        }
        .tel-1 {
          display: flex;
          justify-content: space-between;
          opacity: 0.8;
          line-height: 20px;
          font-size: 14px;
          margin-top: 16px;
        }
        .tel-2 {
          cursor: pointer;
          margin-top: 10px;
          padding: 0 20px;
          background: #fff;
          border-radius: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #000;
          height: 31px;
          font-size: 14px;
        }
      }
    }
    .line {
      max-width: 1200px;
      height: 1px;
      background: #fff;
      opacity: 0.2;
    }
  }
}
</style>
